<template>
  <div class="list-container">
       <div class='topbar clearfix'>
          <el-breadcrumb separator-class="el-icon-arrow-right">
              <el-breadcrumb-item :to="{path:'/project/projectList'}">项目管理</el-breadcrumb-item>
              <el-breadcrumb-item>项目列表</el-breadcrumb-item>
            </el-breadcrumb>
            <div class="fr topRight">
                <span>共{{total}}个项目</span>
                <router-link to="/project/projectList/addProject/0">
                    <div class="addProject">新建项目</div>
                </router-link>
                <div class="seach clearfloat">
                  <el-input v-model="seachName" @keyup.native.enter="seachClick" style="float:left;width:60%" placeholder="请输入项目名称关键字进行搜索"></el-input>
                  <div class="seachBtn" @click="seachClick">搜索</div>
                </div>
            </div>
       </div>
       <div class="header">
            <div class="list clearfloat">
              <span>项目状态</span>
              <el-select 
              popper-class='objOperStatus' 
              @change='operStatusChange'
              v-model="dataParm.operStatus" 
              placeholder="请选择">
                <el-option
                  :label="item.name" 
                  v-for="(item,index) in projectState" 
                  :key="index" 
                  :value="item.status">
                </el-option>
              </el-select>
            </div>
       </div>
       <div class="nav">
           <ul class="navList clearfloat">
                <li v-if='!navList.length' class='nodata'>暂无数据</li>
               <li v-for="(item,index) in navList" :key="index" @click.stop="goDetail(item)" v-else>
                 <div class="imgTop">
                    <i class='icon' :class="[item.operStatus==0?'BeopenedStatus':item.operStatus==2?'stopStatus':item.operStatus==9?'closeStatus':'']">{{item.operStatus==1?'营业中':item.operStatus==2?'停业中':item.operStatus==9?'已关闭':'待开业'}}</i>
                    <img :src="item.homePic.fileUrl" />
                 </div>
                 <div class='nav-content'>
                   <h3 class="h3">{{item.name}}</h3>
                    <p class="p">{{item.geoLocation?item.geoLocation.address:'暂无地址'}}</p>
                    <div class="btnAll clearfloat">
                        <div class="btn" @click.stop="editProject(item)">编辑信息</div>
                        <!-- <i class='icon'></i> -->
                        <div class="btn" @click.stop='changeStatus(item,index)'>更改状态</div>
                        <div class="btn" @click.stop='setAccounts(item,index)'>分账设置</div>
                    </div>
                 </div>
               </li>
           </ul>
           <div class="pagination" v-if="total>dataParm.pageSize">
              <el-pagination
                  background
                  :current-page.sync='dataParm.pageNo'
                  @current-change="handleCurrentChange"
                  :page-size="dataParm.pageSize"
                  :pager-count="11"
                  layout="prev, pager, next"
                  :total="total">
              </el-pagination>
            </div>
       </div>
       <el-dialog title="更改状态" 
        width="450px"
        :before-close="handleClose"
        class="statusDia"
        :visible.sync="diaStatusVisible">
            <el-radio-group v-model="changeRadio">
              <el-radio 
              :label="item.status" 
              v-for="(item,index) in projectState" 
              :key="index" 
              v-if="item.status !== ''">
                   {{item.name}}
              </el-radio><br/>
            </el-radio-group>
             <span slot="footer" class="dialog-footer">
              <el-button @click="diaStatusVisible = false">取 消</el-button>
              <el-button type="primary" @click="confirmStatus()">确 定</el-button>
            </span>
        </el-dialog>
        <my-setAccounts v-if="dialogData.dialogVisible" :dialogData="dialogData" :projectIdItem=projectIdItem  @sumitHandleFlaseFun=sumitHandleFlaseFun></my-setAccounts>
  </div>
</template>
<script>
import api from "@/fetch/url";
import SetAccounts from "../../components/setAccounts/index.vue"
export default {
  components:{
    "my-setAccounts":SetAccounts
  },
  data() {
    return {
        projectIdItem:"",
        dialogData:{
          dialogVisible:false
        },
        projectState:[
          {
            name:'不限',
            status:''
          },{
            name:'待开业',
            status:0
          },{
            name:'营业中',
            status:1
          },{
            name:'停业中',
            status:2
          },{
            name:'已关闭',
            status:9
          }
        ],
        projectStateActive:0,
        dataParm:{
          keyWord:'',
          operStatus:'',
          pageNo:1,
          pageSize:15
        },
       seachName:"",
       navList:[],
       total:0,
       diaStatusVisible:false,
       changeRadio:0,
       changeItem:{}
    }
  },
  created() {
    // api.enumsAll({},{
    //   headers: {
    //       'Content-Type': 'application/json;charset=UTF-8'
    //   }
    // }).then(json => {
    //   if(json){
    //        this.projectState=json.operStatus;
    //   }
    // })
    this.getProjectPage();
  },
  methods: {
    //点击设置分账
    setAccounts(item,index){
       this.projectIdItem = item.id;
       
         // 查询设置
            api.merchantProject({},this.projectIdItem,{
            headers: {
                'Content-Type': 'application/json;charset=UTF-8'
            }
            }).then(json => {
                if(json){
                    // if(json.length==0){
                    //     this.$message({
                    //         message: "先到商户设置去绑定项目",
                    //         type: "error",
                    //     });
                    // }else {
                         this.dialogData.dialogVisible=true;
                    // }
                }else{
                   this.$message({
                      message: "先到商户设置去绑定项目",
                      type: "error",
                  });
                }
            })
       
       
    },
    sumitHandleFlaseFun(){
      this.dialogData.dialogVisible=false;
    },
    editProject(item){
      this.$router.push({
          path:'/project/projectList/addProject',
          name:'addProject',
          params:{
              id:item.id,
          },
      })
    },
    //点击进去详情页面
    goDetail(item){
        this.$router.push({
          path:'/project/projectList/detailProject',
          name:'detailProject',
          params:{
              id:item.id,
          },
          // query:{
          //     anchor:this.anchor,
          //     type:1,
          // }
      })
    },
    //点击搜索
    seachClick(){
       this.dataParm.pageNo = 1;
       this.dataParm.keyWord = this.seachName;
       this.getProjectPage();
    },
     //点击分页触发列表接口
     handleCurrentChange(val) {
         this.dataParm.pageNo = val;
         this.getProjectPage();
     },
     switchTab(item,i){
      //  this.dataParm.pageNo = 1;
      //  this.projectStateActive = i;
      //  this.dataParm.operStatus = item.status;
      //  this.getProjectPage();
     },
     operStatusChange(){
       this.dataParm.pageNo = 1;
       this.getProjectPage();
     },
     getProjectPage(){
       api.projectPage({...this.dataParm}).then(json=>{
          this.navList = json.list;
          this.total = json.total
       })
     },
     changeStatus(item,index){
       this.diaStatusVisible = true;
       this.changeItem = item;
       this.changeItem.index = index;
       this.changeRadio = item.operStatus;
     },
     handleClose(){
       this.diaStatusVisible = false;
     },
     confirmStatus(){
       this.diaStatusVisible = false;
       if(this.changeItem.operStatus == this.changeRadio){
         return false;
       }
       api.alterStatus({
         projectId:this.changeItem.id,
         operStatus:this.changeRadio
       }).then(json=>{
        //  this.changeItem.operStatus = this.changeRadio;
         this.getProjectPage();
        //  this.navList.splice(this.changeItem.index,1,this.changeItem);
       })
     }
  }
}
</script>
<style>
.el-pagination.is-background .btn-next, .el-pagination.is-background .btn-prev, .el-pagination.is-background .el-pager li {
  background-color: #fff;
}
.el-dialog{
    border-radius: 4px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0 !important;
}
</style>
<style lang="scss" scoped>
  
  .nav {
    .top {
      padding:20px 0 0px 0;
      box-sizing: border-box;
      .addProject {
        float: left;
        width: 150px;
        height: 40px;
        color: #fff;
        text-align: center; 
        background: #1890ff;
        cursor: pointer;
        border-radius: 4px;
        line-height: 40px;
      }
      span {
        float: left;
        margin-left:30px;
        line-height: 40px;
      }
    }
   
   
    .pagination {
      margin-top:30px;
      text-align: center;
    }
  }
</style>